<template>
  <div id="app">
    <div class="left">
      <leftCpn></leftCpn>
    </div>
    <div class="right">
        <router-view />
    </div>
  
  </div>
</template>
<script>
import leftCpn from "./components/left/index.vue";
export default {
  components: {
    leftCpn,
  },
  beforeRouteEnter(to, from,next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    next();
    console.log('我是组件内的路由守卫');
  },
};
</script>
<style lang="scss" scoped>

#app {
  display: flex;
}
.left{
flex:1.5;
height: 100vh;
background-color: #333333;
}
.right{
  flex:8.5;
  height: 100vh;
}
</style>
